<template>
  <div class="box">
    <header style="color:white"> 1</header>
    <div class="img"><img src="img/logo.png" alt=""></div>
    <!-- <div class="title">请输入账号</div> -->
    <div class="names">
      <div class="name"><img src="img/yonghuming@2x.png" alt=""><input placeholder="请输入账号" v-model="list.username" type="text"></div>
      <div class="name"><img src="img/mima@2x.png" alt=""><input placeholder="请输入密码" v-model="list.password" :type="type?'password':'text'"><img @click="openPassword" class="imgs" style="width:0.28rem;height:0.13rem" src="img/biyan@2x.png" alt=""></div>
    </div>
    <footer>
      <van-button @click="login" :loading="loading" :disabled="loading" style="width:5rem;border-radius: 0.1rem;" type="info">登录</van-button>
    </footer>

  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      list: {
        username: "",
        password: "",
      },
      type: true,
    };
  },
  methods: {
    login() {
      let ras = this.$getRsaCode(JSON.stringify(this.list));
      this.loading = true;
      const run = (async () => {
        let data = await this.get("/user/userLogin", { youCanYouGo: ras });
        if (data.code == 200) {
          localStorage.setItem("token", data.data.token);
          localStorage.setItem("id", data.data.userId);
          localStorage.setItem("userName", data.data.username);
          localStorage.setItem("name", JSON.stringify(data.data.userRoles));
          let role = data.data.userRoles;
          if (
            role.some(
              (item) =>
                item.roleName === "超级管理员" ||
                item.roleName === "课程权限分配管理员"
            )
          ) {
            localStorage.setItem("role", true);
          }
          this.Toast({
            message: "登录成功",
            duration: 1000,
            onClose: () => {
              this.$router.push("/dashborad/home");
              this.loading = false;
            },
          });
        } else {
          this.Toast.fail(data.msg);
          this.loading = false;
        }
      })();
    },
    openPassword() {
      this.type = !this.type;
    },
  },
};
</script>
<style lang="scss" scoped>
header {
  margin-top: 0.3rem;
  font-size: 0.32rem;
  font-family: PingFang SC;
  font-weight: bold;
  color: #272727;
  width: 100%;
  text-align: center;
}
.img {
  margin-top: 1.25rem;
  text-align: center;
  img {
    width: 1.36rem;
    height: 1.36rem;
  }
}
.title {
  margin-top: 0.5rem;
  font-size: 0.26rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #a4a4a4;
  margin-left: 1.8rem;
}
.names {
  padding: 0 1.2rem;
  margin-top: 1rem;
}
.name {
  padding-bottom: 0.22rem;
  box-sizing: border-box;
  margin-top: 0.4rem;
  display: flex;
  align-items: center;
  border-bottom: 0.01rem solid #eee;
  position: relative;
  .imgs {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  img {
    width: 0.3rem;
    height: 0.35rem;
  }
  input {
    margin-left: 0.3rem;
    height: 0.4rem;
    border: none;
    font-size: 0.26rem;
    width: 100%;
  }
}
footer {
  margin-top: 1.2rem;
  text-align: center;
}
</style>